<!-- 资产 -->
<template>
  <view class="container">
    <picker mode="selector" :range="marketArr" range-key="name" @change="changePicker"
        class="picker-box">
    <view class="head flex">
        <view class="flex">
          <view class="img"> <image src="/static/home/bian@2x.png" class="icon" mode=""></image> </view>
          <text class="market-name">{{market}}</text>
        </view>
        
        <u-icon name="arrow-down" class="arrow" size="22" color="#E4E4E4"></u-icon>
    </view>
    </picker>

    <view class="panel flex">
      <view class="panel-item flex-c">
        <text>总资产折合（USDT）</text>
        <text>0.23112323</text>
      </view>
      <view class="line"></view>
      <view class="panel-item flex-c">
        <text>累计收益（￥）</text>
        <text>8341.76</text>
      </view>
    </view>
    <view class="list flex-c">
      <view class="item flex-c" v-for="i in 10">
        <view class="title flex">
          <text>BTC</text>
          <text>25887688.7789</text>
        </view>
        <view class="content flex">
          <text>SHIBA INU</text>
          <text>$189.90</text>
        </view>
      </view>
      
    </view>
  </view>
</template>

<script>
import {
		fakePosition,
	} from "@/api/mock/home.js";
export default {
  data () {
    return {
      market: '',
				marketArr: [],
    };
  },

  components: {},

  computed: {},

  mounted() {
			fakePosition().then(data => {
				this.market = data.position;
				this.marketArr = data.positionArr;
			});
		},

  methods: {
    changePicker(e) {
				this.market = this.marketArr[e.detail.value];
			},
  }
}

</script>
<style lang='scss' scoped>
.container {
  min-height: 100vh;
  background-color: $b;
  padding: $p;
  .head {
    display: flex;
    width: $w;
    height: 72rpx;
    background: #FFFFFF;
    border-radius: 36px;
    padding: 0 30rpx;
  
    .market-name{
      margin: 0 20rpx 0 10rpx;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
    }
    .icon{
      width: 32rpx;
      height: 32rpx;
    }
  }

  .panel {
    width: $w;
    height: 176rpx;
    margin: 20rpx 0;
    // border-radius: 12rpx;
    background-image: url('/static/me/asset/wode_zichan_banner@2x.png') ;
    background-size: cover;
    padding: 20rpx;
    .line {
      height: 72rpx;
      width: 1rpx;
      border: 2rpx solid #fff;
    }
    &-item text:nth-child(1){
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
    }
    &-item text:nth-child(2){
      font-size: 44rpx;
      font-family: DINPro;
      font-weight: bold;
      color: #FFFFFF
    }
  }

  .list {
    border-radius: 12px;
    .item{
      padding: 30rpx 20rpx;
      width: 688rpx;
      height: 176rpx;
      background: #FFFFFF;
      .title text:nth-child(1){
        font-size: 36rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
      }
      .title text:nth-child(2) {
        font-size: 36rpx;
        font-family: DINPro;
        font-weight: bold;
        color: #333333;
      }
      .content text:nth-child(1){
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;
      }
      .content text:nth-child(2){
        font-size: 28rpx;
        font-family: DINPro;
        font-weight: 400;
        color: #1488FF;
      }
    }
  }

}
</style>